<template>
  <leftTabsItem style="position: relative;" tabs-name="answerAnalysis">
    <div class="Game">

      <van-row>
        <van-col span="8" style="float: left;">
          <van-image style="margin: 10px;" round width="60px" height="60px" :src="avatar" />
          <span style="color: #fff;font-size: 30px;position: absolute;margin-top: 20px;">{{ score }}</span>
        </van-col>
        <van-col span="16" style="text-align: right; display: flex;padding: 20px;justify-content: flex-end;">
          <van-count-down v-if="time > 0 && buzTask.answerTimeType != 0" ref="countDownRef" millisecond :time="time" format="ss:S" @finish="countDownFinish">
            <template #default="timeData">
              <span style="color: #fff;font-size: 14px;">时间：{{ timeData.minutes }}:{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
          <span style="color: #fff;font-size: 14px; margin-left: 30px;">第{{ activedIndex + 1 }}题:共{{ buzTask.examQuestions || 0 }}题</span>
        </van-col>
      </van-row>

      <!--题干区域-->
      <van-row>
        <van-col span="24" style="text-align: left: 5px;">
          <span v-if="question" style="color: #fff;font-size: 25px;margin-left: 10px;">{{ ` ${questionType[question.questionType]}:${question.ask}` }}</span>
        </van-col>
      </van-row>

      <van-row>
        <!--选项区域 但需那与多选题分开-->
        <van-radio-group v-if="question && question.questionType!=2" v-model="checked" style="width: 100%;">
          <van-cell-group inset>
            <van-cell v-for=" (item,index) in question.buzTaskOptions" :key="index" :title="`${item.content}`" clickable @click="checked = item.character">
              <template #label>
                <van-image v-if="item.optionImg" width="50" height="50" :src="item.optionImg" />
              </template>
              <template #right-icon>
                <van-radio :name="item.character" />
              </template>
            </van-cell>
            <van-cell>
              <van-button size="large" type="primary" style="margin-top: 15px;" @click="next">下一题</van-button>
            </van-cell>
            <div v-if="showAnswer">
              <van-cell :border="false" title="正确答案：" :value="question.answerKey" />
              <van-cell :border="false" title="解析：" :label="question.questionMemo" />
            </div>
          </van-cell-group>

        </van-radio-group>
        <van-checkbox-group v-if="question && question.questionType==2" v-model="checkboxed" style="width: 100%;">
          <van-cell-group inset>
            <van-cell v-for="(item, index) in question.buzTaskOptions" :key="item.id" clickable :title="`${item.content}`">
              <template #label>
                <van-image v-if="item.optionImg" width="50" height="50" :src="item.optionImg" />
              </template>
              <template #right-icon>
                <van-checkbox :ref="el => checkboxRefs[index] = el" :name="item.character" @click.stop />
              </template>
            </van-cell>
            <van-cell>
              <van-button size="large" type="primary" style="margin-top: 15px;" @click="nextcheckbox">下一题</van-button>
            </van-cell>
            <div v-if="showAnswer">
              <van-cell :border="false" title="正确答案：" :value="question.answerKey" />
              <van-cell :border="false" title="解析：" :label="question.questionMemo" />
            </div>
          </van-cell-group>
        </van-checkbox-group>
      </van-row>
    </div>

    <template #phone>
      <van-list style="width: 60px;position: absolute;left: -65px;text-align: center;top: 60px;bottom: 0;overflow: auto;">
        <van-cell
          v-for="item in examQuestions"
          :key="item"
          style="background-color: #eee;cursor: pointer;"
          :style="{color: (item - 1) == activedIndex ? '#1989fa' : '' }"
          :title="item"
          @click="onClickActivedIndexChange(item)"
        />
      </van-list>
    </template>
  </leftTabsItem>
</template>

<script>
import leftTabsItem from '@/components/Task/leftTabsItem.vue'
import defaultAvatar from '@/assets/images/defaultAvatar.jpg'

export default {
  components: { leftTabsItem },
  props: {
    appSetting: {
      type: Object,
      default() {
        return {}
      }
    },
    taskDetail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      bgStyle: {},
      // question: {},
      avatar: defaultAvatar,
      score: 0,
      time: 60 * 1000,
      timeData: {},
      currentNum: 0,
      // examQuestions: 0,
      questionType: ['判断题', '单选题', '多选题'],
      activedIndex: 0,
      checked: '',
      checkboxed: [],
      showAnswer: true
    }
  },
  computed: {
    buzTask() {
      if (this.taskDetail && this.taskDetail.buzTask) {
        return this.taskDetail.buzTask
      } else {
        return {}
      }
    },
    buzTaskQuestions() {
      if (this.taskDetail && this.taskDetail.buzTaskQuestions) {
        return this.taskDetail.buzTaskQuestions
      }
      return []
    },
    question() {
      return this.buzTaskQuestions[this.activedIndex] || null
    },
    examQuestions() {
      if (this.buzTask.examQuestions) {
        return parseInt(this.buzTask.examQuestions)
      }
      return 0
    },
    limitTimes() {
      if (this.buzTask.limitTimes) {
        return this.buzTask.limitTimes
      } else {
        return 0
      }
    }
  },
  watch: {
    bgStyle(val) {
      console.log(val, val)
    },
    limitTimes(val) {
      console.log(val, 'limitTimes')
      this.time = parseInt(val) * 1000
    }
  },
  mounted() {
    // this.$refs.countDown.start()
  },
  methods: {
    onClickActivedIndexChange(e) {
      this.activedIndex = e - 1
      if (this.buzTask.answerTimeType === 2) {
        this.$refs.countDown.reset()
      }
    },
    nextcheckbox() {

    },
    next(e) {

    },
    countDownFinish(e) {

    }
  }
}
</script>
